<html>  
  <head>  
        <meta charset="utf-8">  
        <title>5.3.3 各比例尺的坐标轴</title>  
  </head>
<style>
.axis path,
.axis line{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
 
.axis text {
	font-family: sans-serif;
	font-size: 11px;
}
</style>
<body>

<script src="../../d3/d3.min.js" charset="utf-8"></script> 
<script>  

var width = 600;
var height = 600;

var svg = d3.select("body").append("svg")
				.attr("width",width)
				.attr("height",height);

var linear = d3.scale.linear().domain([0,1]).range([0,500]);

var pow = d3.scale.pow().exponent(2).domain([0,1]).range([0,500]);

var log = d3.scale.log().domain([0.01, 1]).range([0, 500]);


var axisLinear = d3.svg.axis().scale(linear).orient("bottom");

var axisPow = d3.svg.axis().scale(pow).orient("bottom");

var axisLog = d3.svg.axis().scale(log).orient("bottom");



svg.append("g").attr("transform","translate(30,30)").attr("class","axis").call(axisLinear);

svg.append("g").attr("transform","translate(30,60)").attr("class","axis").call(axisPow);

svg.append("g").attr("transform","translate(30,90)").attr("class","axis").call(axisLog);

	
</script> 

</body>

</html>